﻿@model Controller2.Models.Brainstorm_Topico
@{
    ViewBag.Title = "MensagensTopico";
}
<style type="text/css">
    .editor-label
    {
        width: 140px;
    }
    #Campanha_Nome
    {
        width: 600px;
    }
    #Topico
    {
        width: 783px;
    }
    #DataCadastro
    {
        width: 90px;
        text-align: center;
    }
    .user
    {
        background-color: #516b86;
        color: #fff; /*border: 1px solid #000;*/
        clear: both;
        float: left;
        margin: 2px 0 2px 0;
        min-height: 80px;
        padding: 10px;
        font-weight: bold;
        width: 180px;
    }
    .msg
    {
        border: 1px solid #516b86;
        color: #000;
        float: left;
        margin: 2px 0 2px 2px;
        min-height: 80px;
        padding: 5px 10px 10px;
        min-width: 710px;
    }
    .username
    {
        float: left;
        margin: 0 0 10px 0;
    }
    .dataMensagem
    {
        clear: both;
        float: left;
    }
    .positivar
    {
        clear: both;
        vertical-align: middle;
        width: 100%;
    }
    .btnResponder
    {
        margin-left: 30px;
    }
    .btnExcluir
    {
        margin-left: 5px;
    }
    .btnExcluir input, .btnResponder input
    {
        padding: 2px;
    }
    #botao
    {
        float: right;
        padding: 10px 20px;
    }
    .hideFielset
    {
        display: none;
    }
    #line
    {
        height: 1px;
        padding: 0;
        margin-top: 5px;
        background-color: Silver;
        width: 100%;
    }
    .positivo, .negativo
    {
    	display: inline-block;
    	line-height: 18px;
    	height: 18px;
    	vertical-align: middle;
        margin-left: 10px;
        width: 30px;
        padding: 0;
    }
    img[alt=Positivo], img[alt=Negativo]
    {
        cursor: pointer;
    }
    .msgOriginal
    {
        width: 90%;
        background-color: Silver;
        font-style: italic;
        padding: 5px 20px 20px;
        margin: 5px auto 20px auto;
    }
    .collapse
    {
        display: block;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
    }
    .collapse:hover
    {
        color: Blue;
    }
</style>
@if (false)
{
    <script src="../../Scripts/jquery-vsdoc.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
    <script src="../../Scripts/controller.js" type="text/javascript"></script>
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Tópico</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.DataCadastro, "Data de Cadastro: ")
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.DataCadastro)
            @Html.LabelFor(model => model.Campanha.Nome, "Campanha: ")
            @Html.DisplayFor(model => model.Campanha.Nome)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Topico, "Tópico: ")
        </div>
        <div class="editor-field">
            @Html.DisplayFor(model => model.Topico)
        </div>
    </fieldset>
    <fieldset id="fieldMensagem" class="hideFielset">
        <legend>Mensagens</legend>
        <div id="mensagens">
            @foreach (var item in Model.Brainstorm_Mensagem.Where(m => m.IdTopico == Model.IdTopico).ToList())
            {
                <div class="corpomensagem @item.IdMensagem">
                    <div class="user">
                        <span class="username">@item.UserName</span> <span class="dataMensagem">@item.DataCadastro</span>
                    </div>
                    <div class="msg">
                        <div class="positivar">
                            <img src="@Url.Content("~/Content/imagens/positivo.png")" data-idmensagem="@item.IdMensagem" alt="Positivo" style="vertical-align: middle;" /><span
                                class="positivo">@item.Brainstorm_Mensagem_Contagem.Count(c => c.IdMensagem == item.IdMensagem && c.Positivo)</span>
                            <img src="@Url.Content("~/Content/imagens/negativo.png")" data-idmensagem="@item.IdMensagem" alt="Negativo" style="vertical-align: middle; margin-left: 20px;" /><span
                                class="negativo">@item.Brainstorm_Mensagem_Contagem.Count(c => c.IdMensagem == item.IdMensagem && c.Negativo)</span>
                            <span class="btnResponder">
                                <input type="button" value="Responder" data-idmensagem="@item.IdMensagem" /></span>
                            @if (item.UserName == User.Identity.Name)
                            {
                                <span class="btnExcluir">
                                    <input type="button" value="Excluir" data-idmensagem="@item.IdMensagem" /></span>
                            }
                        </div>
                        <div id="line">
                        </div>
                        <br />
                        <div>
                            @if (item.IdMensagemOrigem > 0)
                            {                            
                                <div><span class="collapse">Ocultar -</span><br />
                                    <div class="msgOriginal">
                                        <div style="clear: both; font-style: normal !important; font-weight: bold; font-size: 14px;
                                            font-family: Courier New; margin-bottom: 10px;">
                                            Mensagem original: @item.Brainstorm_Mensagem_1.DataCadastro - @item.Brainstorm_Mensagem_1.UserName</div>
                                        @MvcHtmlString.Create(item.Brainstorm_Mensagem_1.Mensagem)
                                    </div>
                                </div>
                            }
                            <div class="textoMensagem">
                                @MvcHtmlString.Create(item.Mensagem)
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </fieldset>
    <div id="botao">
        <input type="button" id="NovaMensagem" value="Nova Mensagem" />
    </div>    
    <div id="alertaErro" style="display: none">
    </div>
    <div id="winForm" style="display: none; overflow: hidden;">
    </div>
}
@(Html.Telerik().ScriptRegistrar()
    .jQuery(false)
    .Globalization(true)
    .DefaultGroup(group => group.Combined(true)
        .Compress(true).CacheDurationInDays(365))
    .Scripts(s => s
        .Add("~/Scripts/jquery.validate.min.js")
        .Add("~/Scripts/jquery.unobtrusive-ajax.min.js")
        .Add("~/Scripts/jquery.validate.unobtrusive.min.js")
        .Add("~/Scripts/2011.1.315/telerik.common.min.js")
        .Add("~/Scripts/2011.1.315/telerik.list.min.js")
        .Add("~/Scripts/2011.1.315/telerik.combobox.min.js")
        .Add("~/Scripts/2011.1.315/telerik.draganddrop.min.js")
        .Add("~/Scripts/2011.1.315/telerik.window.min.js")
        .Add("~/Scripts/2011.1.315/telerik.imagebrowser.min.js")
        .Add("~/Scripts/2011.1.315/telerik.upload.min.js")
        .Add("~/Scripts/2011.1.315/telerik.editor.min.js")
    )
)
<script type="text/javascript">    
    var img = '<img src="@Url.Content("~/Content/imagens/mini-loading.gif")" alt="Aguarde..." style="margin: 0; padding: 0px; vertical-align: middle;" />';
    var html, usernameOrigem, dataOrigem, mensagemOrigem;
    var idMensagemOrigem = 0;
    $(function () {
        var imagem = new Image();
        imagem.src = '@Url.Content("~/Content/imagens/mini-loading.gif")';
        if ('@Model.Brainstorm_Mensagem.Count()' > 0) {
            $('#fieldMensagem').removeClass('hideFielset');
        }
    });
    $('#NovaMensagem').click(function () {
        showLoading();
        var url = '@Url.Action("Mensagem")/@Model.IdTopico?idMensagemOrigem=0';
        $('#winForm').empty().load(url);
        formDialog('winForm', 'Nova Mensagem', 650, 920);
        return false;
    });
    $('.btnResponder').live('click', function (e) {
        showLoading();
        idMensagemOrigem = $(this).children().data('idmensagem');
        usernameOrigem = $('.' + idMensagemOrigem).find('.username').html();
        dataOrigem = $('.' + idMensagemOrigem).find('.dataMensagem').html();
        mensagemOrigem = $('.' + idMensagemOrigem).find('.textoMensagem').html();
        var url = '@Url.Action("Mensagem")/@Model.IdTopico?idMensagemOrigem=' + idMensagemOrigem;
        $('#winForm').empty().load(url);
        formDialog('winForm', 'Nova Mensagem', 650, 920);
        return false;
    });
    $('.btnExcluir').live('click', function (e) {
        showLoading();
        var idMensagem = $(this).children().data('idmensagem');
        $.post('@Url.Action("ExcluirMensagem", "Brainstorm")', { id: idMensagem }, function (data) {
            if (data.excluiu) {
                $('.' + idMensagem).fadeOut(1500);
                if (data.vazio == 0)
                    $('#fieldMensagem').addClass('hideFielset');
            } else {
                alertError(data.error);
            }
            hideLoading();
        });
    });
    $('.collapse').live('click', function (e) {
        var divPai = $(this).parent();
        var fechar = $(this);
        var divMsg = $(this).next().next();
        divMsg.toggle(function (e) {
            if (fechar.html() == 'Ocultar -') {
                fechar.html('Mostrar +');
                divPai.css('margin-bottom', '20px');
                divPai.parents('.corpomensagem').next().css('top', '0').css('margin-top', '2px');                
            }
            else {
                fechar.html('Ocultar -');
            }            
        });
    });
    $('img[alt=Positivo]').live('click', function () {
        var el = this;
        var p = $(el).next().html();
        var n = $(el).next().next().next().html();
        $(el).next().html(img);
        $(el).next().next().next().html(img);
    	var idMensagem = $(el).data('idmensagem');
    	var url = '@Url.Action("AddPositivo", "Brainstorm")';
    	var username = '@User.Identity.Name';
    	$.post(url, { id: idMensagem, username: username }, function (data) {
    		if (data.gravou) {
    			$(el).next().html(data.positivo);
    			$(el).next().next().next().html(data.negativo);
           } else {
               alertError(data.error);
               $(el).next().html(p);
               $(el).next().next().next().html(n);
           }
    	});
    });
    $('img[alt=Negativo]').live('click', function () {
        var el = this;
        var n = $(el).next().html();
        var p = $(el).prev().html();
        $(el).next().html(img);
        $(el).prev().html(img);
        var idMensagem = $(el).data('idmensagem');
        var url = '@Url.Action("AddNegativo", "Brainstorm")';
        var username = '@User.Identity.Name';
        $.post(url, { id: idMensagem, username: username }, function (data) {
            if (data.gravou) {
                $(el).next().html(data.negativo);
                $(el).prev().html(data.positivo);
            } else {
                alertError(data.error);
                $(el).next().html(n);
                $(el).prev().html(p);
            }
        });
    });
    function closeWindow() {
        showLoading();
        $('#mensagens').append(html);
        $('#winForm').dialog('close');
        $("#winForm:ui-dialog").dialog("destroy");
        hideLoading();
        html = usernameOrigem = dataOrigem = mensagemOrigem = "";
        idMensagemOrigem = 0;        
    }
</script>
